<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let person = {
        name:'张三',
        age:18
    }
    let obj = {a:1,b:2}
    //模拟vue3中的实现响应式
    const p = new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            return Reflect.get(target,propName)
        },
        //有人修改、增加p的某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了`)
            Reflect.set(target,propName,value)
        },
        //有人删除p的某个属性时调用
        deleteProperty(target,propName){
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了`)
            return Reflect.get(target,propName)
        }
    })
    // Object.defineProperty(obj,'c',{
    //   get(){
    //     return 3
    //   }
    // })
    // Object.defineProperty(obj,'c',{
    //   get(){
    //     return 3
    //   }
    // })
    const x1 = Reflect.defineProperty(obj,'c',{
        get(){
            return 3
        }
    })
    const x2 = Reflect.defineProperty(obj,'c',{
        get(){
            return 4
        }
    })
    console.log('@@@');
</script>
</body>
</html>